{layout name="layout" /}

<style>
.list-container{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
}
.list-item{
    align-self:1;
    width:200px;
    height:200px;
    margin:5px;
    position:relative;
}
.list-image{
    max-width:100%;
    max-height:100%;
    width:100%;
    height:100%;
}
.list-image:hover{
    border:2px solid yellow;
    cursor:pointer;
}
.list-image:active{
    background-color:2px solid red;
}
.list-image-title{
    position:absolute;
    font-size:15px;
    line-height:28px;
    width:100%;
    bottom:0px;
    /* white-space:nowrap; */
    color:#fff;
    text-overflow:ellipsis;
    overflow:hidden;
    background:rgba(0,0,0,0.7);
}
.list-selected{
    border:3px dashed #0092DC;
    padding:3px;
}

</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto"></div>
        <div class="layui-card-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <span>图片列表</span>
                <button type="button" class="layui-btn" id="layuiadmin-upload-image">上传图片</button>
            </div>
            <div class="layui-card-body">
                <div class="list-container" id="container"></div>
                <div id="page"></div>
            </div>
            </div>
        </div>
    </div>
</div>
<script id="imageList" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="list-item" data-id="{{item.id}}" data-path="{{item.path}}" data-title="{{item.name}}">
        <img class="list-image" src="{{item.path}}"/>
        <div class="list-image-title">{{item.name}}</div>
    </div>
    {{#  }); }}
</script>

<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    })
    .extend({
        index: 'lib/index' //主入口模块
    })
    .use(['index','laypage','upload'],function(){
        var $=layui.$
        ,upload=layui.upload
        ,admin=layui.admin
        ,laytpl=layui.laytpl
        ,laypage=layui.laypage
        ,default_pageCount=16
        ,default_page=1;

        upload.render({
           elem: '#layuiadmin-upload-image'
           , url: '/admin/upload/wechatFile?type=image'
           , accept: 'images'
           , method: 'post'
           , acceptMime: 'image/*'
           , done: function (res) {
                if(!res.data) return layer.msg('上传失败');
                getImageList(default_page,default_pageCount);
           }
        });

        var option={
            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 20 //数据总数，从服务端得到
            ,limit:16
            ,limits:[8,16,20,28,36,44,52,60,100]
            ,layout:["count","prev","page","next","skip","limit"]
            ,groups:5
            ,jump:function(obj,first){
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                if(!first){
                    option.limit=obj.limit;
                    getImageList(obj.curr,obj.limit)
                }
            }
        };
        
        function getImageList(page,limit){
            admin.req({
                url: "/admin/wechatArticle/images",
                data: {page:page,limit:limit},
                method: 'post',
                success: function (result) {
                    if (result.data) {
                        option.count=result.count;
                        option.curr=page;
                        renderList(result.data);
                        laypage.render(option);
                    } else {
                        layer.msg(result.msg, { icon: 4 });
                    }
                }
            })
        }
        
        function renderList(data){
            var getTpl = imageList.innerHTML
            ,view =$("#container");
            laytpl(getTpl).render(data, function(html){
                $("#container").html(html);
            });
        }
        getImageList(default_page,default_pageCount);

        $(document).on("click",".list-item",function(e){
            $(this).attr("data-selected",true).addClass("list-selected")
            .siblings(".list-item").attr("data-selected",false).removeClass("list-selected");
        })
    })
</script>